<template>
	<view>
		<view class="black-list" v-if="blacks.length > 0">
			<view class="black-item" v-for="(item, index2) in blacks" :key="index2">
				<movable-area>
					<movable-view out-of-bounds="true" direction="horizontal" :x="item.xmove" inertia="true" :data-productIndex="index2"
					 @bindchange="handleMovableChange">

						<view class="uni-flex uni-row " @tap="goto(item.partyId)">
							<view class="black-list-logo">
								<image :src="baseUrl + item.imgUrl"></image>
							</view>
							<view class="uni-flex uni-column">
								<view class="black-list-right" style="flex: 1;">
									<text>{{item.nickname}}</text>
									<view style="margin-left: 5px; font-size:24px; color: #b53df3;" v-if="item.gender=='F'" class="uni-icon uni-icon-women"></view>
									<view style="margin-left: 5px; font-size:24px;  color: #b53df3" v-else class="uni-icon uni-icon-man"></view>
									<text>{{item.groupId}}</text>
								</view>
								<view class="uni-text-gray" style="flex: 1;">{{item.sign}}</view>
							</view>

						</view>

					</movable-view>

				</movable-area>
				<view class="delete-btn" :data-productIndex="index2" @click="handleDeleteCart">删除</view>
			</view>
		</view>
		<view v-else class="empty-view">
			<image class="icon" src="../../../static/image/my/setting/black.png" />
			<text class="text">您没有设置黑名单</text>
		</view>
	</view>
</template>

<script>
	import {
		getUrl
	} from '@/common/oss';
	
	import {getBlacks,deleteBlackById } from '@/api/ucenter/index';
	import { mapState,mapMutations,mapGetters } from 'vuex'

	export default {
		data(){
			return {
				blacks: [],
				page: 1,
				pageSize: 20,
				baseUrl: "",
			};
		}, 
		
		onLoad: function(e) {
			uni.setNavigationBarTitle({
				title: "黑名单",
			})
			this.baseUrl = getUrl();
			this.loadBlacks();
			//this.getPage();
		},
		
		computed: {
			...mapGetters(
				["userId"],
			),
		},
		methods: {
			loadBlacks() {
				getBlacks(this.getParamsters()).then(response => {
					if(response.status == 200) {
						console.log(JSON.stringify(response.data))
						this.blacks = this.blacks.concat(response.data);
					}
				});
			},
			getParamsters() {
				return {
					partyId: this.userId,
					limit: this.pageSize,
					page: this.page,
					orderBy: "createdStamp",
					sort: "desc"
				}
			},
			goto: function(id) {
				console.log("navigate to mall ....")
				uni.switchTab({
					url: '/pages/my/profile?partyId='+e
				})
			},
			/**
			 * 隐藏删除按钮
			 */
			hideDeleteButton: function(e) {
				let productIndex = e.currentTarget.dataset.productindex
				console.log("productIndex:" + productIndex)
				this.setXmove(productIndex, 0)
			},

			/**
			 * 设置movable-view位移
			 */
			setXmove: function(productIndex, xmove) {
				this.blacks[productIndex]["xmove"] = xmove;
			},
			/**
			 * 处理movable-view移动事件
			 */
			handleMovableChange: function(e) {
				if (e.detail.source === 'friction') {
					if (e.detail.x < -30) {
						this.showDeleteButton(e)
					} else {
						this.hideDeleteButton(e)
					}
				} else if (e.detail.source === 'out-of-bounds' && e.detail.x === 0) {
					this.hideDeleteButton(e)
				}
			},
			/**
			 * 显示删除按钮
			 */
			showDeleteButton: function(e) {
				let productIndex = e.currentTarget.dataset.productindex
				this.setXmove(productIndex, -65)
			},
			findPosition: function(id) {
				return this.blacks.findIndex(item => {
					return item.cartItemId == id
				});
			},

			
			/**
			 * 删除产品
			 */
			handleDeleteCart: function(e) {
				let productIndex = e.currentTarget.dataset.productindex
				deleteBlacks(this.userId,this.blacks[i].partyId).then(response => {
					console.log(response);
				});
				console.log("handleDelte end ............................" + productIndex);
			},

		}
	}
</script>

<style>
	.black-list .black-item {
		position: relative;
		width: 100vw;
		border-bottom: 2upx solid #E9E9E9;
		box-sizing: border-box;
		background: #fff;
		z-index: 999;
		border-bottom: #DCD9D9 solid 1upx;
	}

	.black-list .black-item movable-view {
		height: 100upx;
		width: 100vw;
		background: #fff;
		z-index: 999;
	}

	.black-list .black-item movable-area {
		height: 100upx;
		width: calc(100vw - 120upx);
	}

	.black-list-logo {
		width: 100upx;
		height: 100upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.black-list-right {
		padding: 10upx;
	}

	.black-list-logo image {
		width: 90upx;
		height: 90upx;
	}

	.black-list .black-item .delete-btn {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 120upx;
		font-size: 24upx;
		color: #FFFFFF;
		font-family: PingFangSC-Regular;
		line-height: 100upx;
		height: 100upx;
		z-index: 1;
		background: #E66671;
		text-align: center;
	}

	.black-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 100upx;
		width: 100%;
		background: #fff;
		display: flex;
	}

	.cart-bottom .left {
		height: 34upx;
		width: auto;
		line-height: 34upx;
		margin: 28upx 10upx;
		font-size: 29upx;
		left: 0;

	}

	.black-bottom .total {
		height: 34upx;
		flex: 1;
		margin: 33upx 10upx;
		font-size: 29upx;

	}

	.cart-bottom .checkout {
		position: absolute;
		height: 100upx;
		width: 210upx;
		text-align: center;
		line-height: 100upx;
		font-size: 29upx;
		background: #b4282d;
		right: 0;
		color: #fff;

	}
	
	.empty-view {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
		.empty-view .icon {
			margin-top: 100upx;
			height: 248upx;
			width: 258upx;
			margin-bottom: 10upx;
		}
	
		.empty-view .text {
			width: auto;
			font-size: 28upx;
			line-height: 35upx;
			color: #999;
		}
</style>
